<template>
  <div class="content">
    <el-card shadow="always" class="input-card">
      <div class="input">
        <div class="input-manual" v-on:click="manualInput">
          <img src="@/assets/proImg/keyboard.png" class="input-img-detail">
          <p>手动录入</p>
        </div>
        <div class="input-batch" v-on:click="batchInput">
          <img src="@/assets/proImg/batch.png" class="input-img-detail">
          <p>批量导入</p>
        </div>
        <div class="input-img" v-on:click="imgInput">
          <img src="@/assets/proImg/imgInput.png" class="input-img-detail">
          <p>上传图片</p>
        </div>
      </div>
      <div id="input-widget-batch">
        <el-upload
          class="upload-batch"
          ref="uploadBatch"
          action="batchInput"
          :http-request="batchInputWidget"
          multiple
          :on-change="changeFileLengthBatch"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileBatchList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadBatch"
                     class="input-upload-btn">上传
          </el-button>
          <!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </div>
      <div id="input-widget-img">
        <el-upload
          class="upload-img"
          ref="uploadImg"
          action="imgInput"
          :http-request="imgInputWidget"
          multiple
          list-type="picture"
          :on-change="changeFileLengthImg"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileImgList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadImg"
                     class="input-upload-btn">上传
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
      <div id="input-widget-hand">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="input-base-form">
          <div class="input-double-item">
            <el-form-item label="患者姓名" prop="name">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-input v-model="form.age"></el-input>
            </el-form-item>
          </div>
          <div class="input-double-item">
            <el-form-item label="身高" prop="height">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-input v-model="form.height"></el-input>
            </el-form-item>
            <el-form-item label="体重" prop="weight">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-input v-model="form.weight"></el-input>
            </el-form-item>
          </div>
          <div class="input-double-item">
            <el-form-item label="性别" class="input-married" prop="sex">
              <template>
                <el-radio v-model="form.sex" label="1">男</el-radio>
                <el-radio v-model="form.sex" label="2">女</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="日期" class="input-married" prop="time">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="input-double-item">
            <el-form-item label="是否结婚" class="input-married" prop="married">
              <!-- 在元素上采用v-model双向绑定 -->
              <template>
                <el-radio v-model="form.married" label="1">是</el-radio>
                <el-radio v-model="form.married" label="2">否</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <!-- 在元素上采用v-model双向绑定 -->
              <el-input v-model="form.nation"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="主诉" prop="main">
            <!-- 在元素上采用v-model双向绑定 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.main">
            </el-input>
          </el-form-item>
          <el-form-item label="现病史" prop="presents">
            <!-- 在元素上采用v-model双向绑定 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.presents">
            </el-input>
          </el-form-item>
          <el-form-item label="既往史" prop="history">
            <!-- 在元素上采用v-model双向绑定 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.history">
            </el-input>
          </el-form-item>
          <el-form-item label="治疗方案" prop="therapy">
            <!-- 在元素上采用v-model双向绑定 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.therapy">
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <!-- 在元素上采用v-model双向绑定 -->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.note">
            </el-input>
          </el-form-item>
          <el-upload
            ref="uploadSingle"
            action="singleInput"
            :http-request="singleInputWidget"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :auto-upload="true">
            <el-button slot="trigger" size="small" type="primary" class="input-submit-btn input-select-btn">选取文件自动识别</el-button>
          </el-upload>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')" class="input-submit-btn">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CaseInput',
  data () {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(parseInt(value))) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      fileBatchList: [],
      filesBatchLength: 0,
      fileImgList: [],
      filesImgLength: 0,
      form: {
        name: '',
        sex: '',
        age: '',
        height: '',
        weight: '',
        married: '',
        nation: '',
        main: '',
        presents: '',
        history: '',
        therapy: '',
        time: '',
        note: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 5, message: '长度不合法', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别！', trigger: 'change'}
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ],
        time: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        height: [
          {required: true, message: '请输入身高！', trigger: 'change'}
        ],
        weight: [
          {required: true, message: '请输入体重！', trigger: 'change'}
        ],
        married: [
          {required: true, message: '请选择是否结婚', trigger: 'change'}
        ],
        nation: [
          {required: true, message: '请选择民族！', trigger: 'change'}
        ],
        main: [
          {required: true, message: '请输入主诉！', trigger: 'change'}
        ],
        presents: [
          {required: true, message: '请输入现病史！', trigger: 'change'}
        ],
        history: [
          {required: true, message: '请输入既往史！', trigger: 'change'}
        ],
        therapy: [
          {required: true, message: '请输入治疗方案！', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    manualInput () {
      this.setVisible('block', 'none', 'none')
    },
    imgInput () {
      this.setVisible('none', 'none', 'block')
    },
    batchInput () {
      this.setVisible('none', 'block', 'none')
    },
    setVisible (hand, batch, img) {
      let inputWidgetBatch = document.getElementById('input-widget-batch')
      let inputWidgetImg = document.getElementById('input-widget-img')
      let inputWidgetHand = document.getElementById('input-widget-hand')
      inputWidgetBatch.style.display = batch
      inputWidgetHand.style.display = hand
      inputWidgetImg.style.display = img
    },
    // 修改当前文件列表长度
    changeFileLengthBatch (file, fileBatchList) {
      this.filesBatchLength = fileBatchList.length
    },
    changeFileLengthImg (file, fileImgList) {
      this.filesImgLength = fileImgList.length
    },
    batchInputWidget (param) {
      // 将文件加入需要上传的文件列表
      this.fileBatchList.push(param.file)
      // 当uploadFiles长度等于用户需要上传的文件数时进行上传
      if (this.fileBatchList.length === this.filesBatchLength) {
        // 创建FormData上传
        let formData = new FormData()
        // 将全部文件添加至FormData中
        this.fileBatchList.forEach(file => {
          formData.append('file', file)
        })
        // 配置请求头
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // 上传文件
        this.$axios.post('/pdfFiles', formData, config)
          .then(successResponse => {
            console.log(successResponse.data)
            this.fileBatchList = []
            this.filesImgLength = 0
          })
          .catch(failResponse => {
          })
      }
    },
    singleInputWidget (param) {
      var _this = this
      // 创建FormData上传
      let formData = new FormData()
      // 将全部文件添加至FormData中
      formData.append('file', param.file)
      // 配置请求头
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // 上传文件
      this.$axios.post('/pdfFile', formData, config)
        .then(successResponse => {
          console.log(successResponse.data.data)
          this.$refs.uploadSingle.clearFiles()
          let temp = successResponse.data.data
          _this.form.name = temp.name
          _this.form.sex = temp.sex
          _this.form.age = temp.age
          _this.form.height = temp.height
          _this.form.weight = temp.weight
          _this.form.married = temp.married
          _this.form.nation = temp.nation
          _this.form.main = temp.main
          _this.form.presents = temp.presents
          _this.form.history = temp.history
          _this.form.therapy = temp.therapy
          let date = new Date(temp.time)
          _this.form.time = date
          _this.form.note = temp.note
          this.fileBatchList = []
          this.filesImgLength = 0
        })
        .catch(failResponse => {
        })
    },
    imgInputWidget (param) {
      // 将文件加入需要上传的文件列表
      this.fileImgList.push(param.file)
      // 当uploadFiles长度等于用户需要上传的文件数时进行上传
      if (this.fileImgList.length === this.filesImgLength) {
        // 创建FormData上传
        let formData = new FormData()
        // 将全部文件添加至FormData中
        this.fileImgList.forEach(file => {
          formData.append('file', file)
        })
        // 配置请求头
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        // 上传文件
        this.$axios.post('/imgFiles', formData, config)
          .then(successResponse => {
            console.log(successResponse.data)
            this.fileImgList = []
            this.filesImgLength = 0
          })
          .catch(failResponse => {
          })
      }
    },
    submitUploadBatch () {
      this.$refs.uploadBatch.submit()
    },
    submitUploadImg () {
      this.$refs.uploadImg.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleSuccess (response, file, fileList) {
      console.log('进来了哦')
      this.$refs.uploadSingle.clearFiles()
    },
    submitForm (formName) {
      var _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.married = this.form.married === 1
          this.$axios
            .post('/case', this.form)
            .then(successResponse => {
              if (successResponse.data.code === 200) {
                console.log(successResponse.data.data)
                _this.resetForm(formName)
                this.$message({
                  message: '录入成功',
                  type: 'success'
                })
              }
            })
            .catch(failResponse => {
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  mounted () {
    this.setVisible('none', 'none', 'none')
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input-card {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.input {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.input-img-detail {
  width: 100px;
}

.input-manual {
  cursor: pointer;
  margin-right: 100px;
}

.input-batch {
  cursor: pointer;
}

.input-img {
  cursor: pointer;
  margin-left: 100px;
}

#input-widget-batch {
  margin-top: 100px;
  display: none;
}

#input-widget-img {
  margin-top: 100px;
  display: none;
}

.input-upload-btn {
  background-color: #38c0aa;
  border-color: #38c0aa;
}

.input-double-item {
  display: flex;
}

#input-widget-hand {
  margin-top: 100px;
}

.input-base-form {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.input-sex {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-left: 80px;
  margin-bottom: 22px;
}

.input-married {
  width: 286px !important;
  /*margin-left: 40px;*/
}

.input-submit-btn {
  width: 100%;
  background-color: #38c0aa;
  border-color: #38c0aa;
}

.input-select-btn {
  width: 492px;
  margin-left: 80px;
  margin-bottom: 20px;
}
</style>
